<template>
	<uy-popup ref="popup" @maskClick="tapTo('cancel')">
		<view class="uy-w-510 uy-bg-FFFFFF uy-rel uy-p-x-30" :style="itemStyle">
			<block v-if="!showInput">
				<view class="uy-text-c uy-l-h-86" v-if="title">{{title || ''}}</view>
				<view class="uy-text-c" :class="{'uy-m-t-40': !title}">{{content || ''}}</view>
			</block>
			<!-- <block v-else>
				<view class="u-bg-F5F5F5 u-p-20">
					<textarea class="u-w-p-100 u-font-28" v-model="inputValue" cols="30" rows="10"
						:placeholder="placeholder"></textarea>
				</view>
			</block> -->
			<view class="uy-flex uy-m-y-30 uy-p-b-30">
				<view class="uy-flex-1 uy-l-h-66 uy-text-c uy-m-r-30 uy-color-999999 uy-bg-F5F5F5 uy-b-r-15"
					@tap="tapTo('cancel')" v-if="!showCancel">
					{{cancelText || ''}}
				</view>
				<view class="uy-flex-1 uy-l-h-66 uy-text-c uy-b-r-15" :style="confirmBtnStyle" @tap="tapTo('click')">{{confirmText || ''}}
				</view>
			</view>
		</view>
	</uy-popup>
</template>

<script>
	/**
	 * @description 模态框
	 */
	export default {
		name: "uy-modal-popup",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			content: {
				type: String,
				default: ''
			},
			confirmText: {
				type: String,
				default: '确认'
			},
			confirmColor: {
				type: String,
				default: '#FFFFFF'
			},
			confirmBgColor: {
				type: String,
				default: '#55aaff'
			},
			confirmRadius: {
				type: [Number, String],
				default: 15
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			data: {
				type: Object,
				default: () => {
					return {}
				}
			},
			showCancel: {
				type: Boolean,
				default: false
			},
			showInput: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: '请输入拒绝退款原因...'
			},
			// 自定义圆角  默认10rpx
			radius: {
				type: [Number, String],
				default: 10
			}
		},
		data() {
			return {
				isShow: this.show,
				inputValue: ''
			};
		},
		computed: {
			itemStyle() {
				return `border-radius: ${this.radius}rpx`
			},
			confirmBtnStyle() {
				return `background: ${this.confirmBgColor}; color: ${this.confirmColor}; border-radius: ${this.confirmRadius}rpx;`
			}
		},
		methods: {
			tapTo(state) {
				switch (state) {
					case 'cancel':
						this.isShow = false;
						this.$emit('update:show', false)
						break
					case 'click':
						this.$emit('update:show', false)
						if (this.showInput) {
							this.data.refuseValue = this.inputValue;
						}
						this.$emit('click', this.data)
						this.inputValue = '';
						break
					default:
						break
				}
			}
		},
		watch: {
			show(val) {
				this.isShow = val;
			},
			isShow(val) {
				if(val) {
					this.$refs.popup.open()
				} else {
					this.$refs.popup.close()
				}
			}
		}
	}
</script>

<style>

</style>